<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue和bootstrap的结合</title>
		<meta name="format-detection" content="telephone=no"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <meta name="apple-touch-fullscreen" content="yes" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="js/lib/bootstrap/css/bootstrap.css" />
		<script src="js/base.js"></script>
		<style>
			.container{padding-top: .2rem;}
		</style>
	</head>
	<body>
		<div class="container" id="box">
			<form action="" role="form">
				<div class="form-group">
					<label for="username">用户名：</label>
					<input type="text" id="username" class="form-control" placeholder="用户名" v-model="username" />
				</div>
				<div class="form-group">
					<label for="age">年龄：</label>
					<input type="text" id="age" class="form-control" placeholder="年龄" v-model="age" />
				</div>
				<div class="form-group">
					<input type="button" class="btn btn-primary" v-on:click="add()" value="添加" />
					<!--<button type="button" class="btn btn-primary" v-on:click="add()">添加</button>-->
					<!--<button type="reset" class="btn btn-danger">重置</button>-->
					<input type="reset" class="btn btn-danger" value="重置" />
				</div>
			</form>
			
			
			<table class="table table-bordered">
				<caption>用户信息表</caption>
				<tr class="text-danger">
					<th class="text-center">序号</th>
					<th class="text-center">名字</th>
					<th class="text-center">年龄</th>
					<th class="text-center">操作</th>
				</tr>
				<tr v-for="(item,index) in myData">
					<td class="text-center">{{index+1}}</td>
					<td class="text-center">{{item.name}}</td>
					<td class="text-center">{{item.age}}</td>
					<td class="text-center">
						<button class="btn btn-primary btn-sm" type="button" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=index">删除</button>
				</tr>
				<tr v-show="myData.length == 0">
					<td colspan="4"><p class="text-muted text-center">暂无数据</p></td>
				</tr>
				<tr class="text-right" v-show="myData.length !=0">
					<td colspan="4"><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=-2">全部删除</button></td>
				</tr>
			</table>
			
			
			<!-- 弹出框 start -->
			<div role="dialog" class="modal" id="layer">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal">
								<span>&times;</span>
							</button>
							<h4 class="modal-title">确认删除吗？</h4>
						</div>
						<div class="modal-body text-right">
							<button class="btn btn-primary btn-sm" type="button" data-dismiss="modal">取消</button>
							<button class="btn btn-danger btn-sm" type="button" data-dismiss="modal" v-on:click="delMsg(nowIndex)">确认</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 弹出框 end -->
			
		</div>
		
		<script src="js/jquery-2.2.0.min.js"></script>
		<script src="js/lib/bootstrap/js/bootstrap.js"></script>
		<script src="js/lib/vue.js"></script>
		<script>
			$(function(){
				var vtable = new Vue({
                el:'#box',
                data:{
                    myData:[],
                    username:'',
                    age:'',
                    nowIndex:-100
                },
                methods:{
                    add:function(){
                        this.myData.push({
                            name:this.username,
                            age:this.age
                        });

                        this.username='';
                        this.age='';
                    },
                    delMsg:function(n){
                        if(n==-2){
                        	$("#layer").find(".modal-title").text("确认删除全部吗？");
                            this.myData=[];
                        }else{
                            this.myData.splice(n,1);
                        }
                    }
                }
            });
			});
		</script>
	</body>
</html>
